<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的页面</title>
    <style>
        body { font-family: Arial, sans-serif; background-color: #f8fafc; color: #1f2937; margin: 0; padding: 0; display: flex; justify-content: center; }
        .container { width: 100%; max-width: 480px; background-color: #ffffff; }
        .user-info { display: flex; align-items: center; padding: 15px; background-color: #ffffff; border-bottom: 1px solid #e5e7eb; }
        .user-info .avatar { width: 60px; height: 60px; background-color: #e5e7eb; border-radius: 50%; margin-right: 15px; }
        .user-details { font-size: 14px; }
        .user-name { font-weight: bold; color: #374151; }
        .user-status { font-size: 12px; color: #6b7280; margin-top: 4px; }
        .function-section { background-color: #ffffff; margin: 10px; padding: 10px; border-radius: 8px; border: 1px solid #e5e7eb; }
        .function-item { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid #e5e7eb; cursor: pointer; }
        .function-item:last-child { border-bottom: none; }
        .function-icon { width: 30px; height: 30px; background-color: #e5e7eb; border-radius: 8px; margin-right: 15px; }
        .function-text { font-size: 14px; color: #374151; }
        .footer { display: flex; justify-content: space-around; padding: 10px 0; background-color: #ffffff; border-top: 1px solid #e5e7eb; }
        .footer div { text-align: center; font-size: 12px; color: #6b7280; }
        .footer img { width: 24px; height: 24px; margin-bottom: 4px; }
    </style>
</head>
<body>
    <div class="container">

        <!-- User Information Section -->
        <div class="user-info">
            <div class="avatar"></div>
            <div class="user-details">
                <div class="user-name">用户名</div>
                <div class="user-status">工会认证状态：已认证</div>
            </div>
        </div>

        <!-- Common Functions Section -->
        <div class="function-section">
            <div class="function-item">
                <div class="function-icon"></div>
                <div class="function-text">福利记录</div>
            </div>
            <div class="function-item">
                <div class="function-icon"></div>
                <div class="function-text">活动记录</div>
            </div>
            <div class="function-item">
                <div class="function-icon"></div>
                <div class="function-text">我的申请</div>
            </div>
            <div class="function-item">
                <div class="function-icon"></div>
                <div class="function-text">我的消息</div>
            </div>
        </div>

        <!-- Settings Section -->
        <div class="function-section">
            <div class="function-item">
                <div class="function-icon"></div>
                <div class="function-text">账号设置</div>
            </div>
            <div class="function-item">
                <div class="function-icon"></div>
                <div class="function-text">隐私政策</div>
            </div>
            <div class="function-item">
                <div class="function-icon"></div>
                <div class="function-text">退出登录</div>
            </div>
        </div>

        <!-- Footer Navigation -->
        <div class="footer">
          <div><div class="icon-square" style="background-color: #3b82f6;"></div>首页</div>
          <div><div class="icon-square" style="background-color: #f59e0b;"></div>活动</div>
          <div><div class="icon-square" style="background-color: #10b981;"></div>福利</div>
          <div><div class="icon-square" style="background-color: #6366f1;"></div>我的</div>
      </div>
    </div>
</body>
</html>
